<template>
  <!--操作栏-->
  <div class="operateBox" id="operateBox">
    <div class="box" :style="'height:'+height+'px'">
      <div class="title">操作</div>
      <div class="box_item">
        <op_index v-if="chooseComponent==null"></op_index>
        <!--通用echart操作列-->
        <el-tabs v-else v-model="active" tab-position="top" :stretch="true">
          <el-tab-pane name="1">
            <span slot="label">
               <el-tooltip class="item" effect="dark" content="配置" placement="top">
                 <i class="el-icon-s-tools" :class="active=='1'?'is-active':''"></i>
               </el-tooltip>
            </span>
            <op_text v-if="chooseComponent.componentName=='screen_text'"></op_text>
            <op_chart_general v-if="chooseComponent.componentName=='screen_chart_general'"></op_chart_general>
            <op_chart_bar v-if="chooseComponent.componentName=='screen_chart_bar'"></op_chart_bar>
            <op_chart_bar v-if="chooseComponent.componentName=='screen_chart_line'"></op_chart_bar>
            <op_chart_bar v-if="chooseComponent.componentName=='screen_chart_pie'"></op_chart_bar>
            <op_text_date v-if="chooseComponent.componentName=='screen_text_date'"></op_text_date>
            <op_table_index v-if="chooseComponent.componentName=='screen_table_index'"></op_table_index>
            <op_table_rank v-if="chooseComponent.componentName=='screen_table_rank'"></op_table_rank>
            <op_border_index v-if="chooseComponent.componentName=='screen_border_index'"></op_border_index>
            <op_decoration_index v-if="chooseComponent.componentName=='screen_decoration_index'"></op_decoration_index>
            <op_img_index v-if="chooseComponent.componentName=='screen_img_index'"></op_img_index>
          </el-tab-pane>
          <el-tab-pane name="2">
              <span slot="label">
                <el-tooltip class="item" effect="dark" content="配置" placement="top">
                   <i class="el-icon-document-copy" :class="active=='2'?'is-active':''"></i>
                </el-tooltip>
              </span>
            <dataConfig></dataConfig>
          </el-tab-pane>
          <el-tab-pane name="3">
            <span slot="label">
              <el-tooltip class="item" effect="dark" content="参数" placement="top">
                 <i class="el-icon-folder" :class="active=='3'?'is-active':''"></i>
              </el-tooltip>
            </span>
            <!--文本操作-->
            <el-form ref="form" label-width="100px" style="width: 98%">
              <el-form-item label="图层编号：">
                <el-input size="mini" v-model="chooseComponent.uuid" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="x位置：">
                <el-input-number size="mini" v-model="chooseComponent.location.left" controls-position="right"
                                 :min="0" :precision="2"></el-input-number>
              </el-form-item>
              <el-form-item label="y位置：">
                <el-input-number size="mini" v-model="chooseComponent.location.top" controls-position="right"
                                 :min="0" :precision="2"></el-input-number>
              </el-form-item>
              <el-form-item label="宽度：">
                <el-input-number size="mini" v-model="chooseComponent.location.width" controls-position="right"
                                 :min="0" :precision="2"></el-input-number>
              </el-form-item>
              <el-form-item label="高度：">
                <el-input-number size="mini" v-model="chooseComponent.location.height" controls-position="right"
                                 :min="0" :precision="2"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>


      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "operate",
    components: {
      //操作首页
      'op_index': () => import('./operateModule/index'),
      //数据配置
      'dataConfig': () => import('./operateModule/dataConfig'),
      //文字操作
      'op_text': () => import('./operateModule/text/op_text'),
      'op_text_date': () => import('./operateModule/text/op_text_date'),
      //图标操作
      'op_chart_general': () => import('./operateModule/chart/op_general'),
      'op_chart_bar': () => import('./operateModule/chart/op_bar'),
      //轮播表操作
      'op_table_index': () => import('./operateModule/table/index'),
      //排名轮播表操作
      'op_table_rank': () => import('./operateModule/table/rank'),
      //datav边框操作
      'op_border_index': () => import('./operateModule/border/index'),
      //datav装饰操作
      'op_decoration_index': () => import('./operateModule/decoration/index'),
      //图片操作
      'op_img_index': () => import('./operateModule/img/index'),

    },
    computed: {
      //当前选中的值
      chooseComponent() {
        return this.$store.state.chooseComponent
      },
    },
    data() {
      return {
        height: 0,
        active: "1",
      }
    },
    mounted() {
      this.height = document.getElementById("operateBox").offsetHeight
    }
  }
</script>

<style scoped lang="less">
  .operateBox {
    width: 300px;
    height: 100%;
    background: #545c64;
    display: flex;
    flex-direction: column;

    .box {
      height: 100%;
      width: 100%;
      color: #bcc8d4;
      background: #545c64;
      display: flex;
      flex-direction: column;

      .title {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        font-size: 18px;
        background: #0C0C0C;
        color: white;
      }

      .box_item {
        overflow: hidden;
        overflow-y: auto;
        width: 100%;
        flex: 1;
      }
    }
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(144, 146, 152, .3);
  }

  ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  /deep/ .el-tabs__item {
    color: white;
  }

  .is-active {
    color: #409eff !important;
  }

  /deep/ .el-form-item__label {
    color: white;
  }

  /deep/ .el-collapse-item__header {
    background-color: #545c64;
    color: white;
  }

  /deep/ .el-collapse-item__content {
    background-color: #545c64;
    color: white;
  }

  /deep/ .el-radio__label {
    color: white;
  }
</style>
